<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Getting Started: Serving Web Content</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style>
        ul#test li{
            display: block;
            /*width: 90px;*/
            height: 25px;
            cursor: pointer;
        }
        #chat{
            width: 300px;
        }
    </style>
</head>

<body>
<div id="state-info"></div>
<div>
    <ul id="test">
        <li><p>发现消息对象：</p></li>
        <li id="moren" th:text="${id}" style="color: #ff0000;">默认</li>
        <li ><p>选择下列要发送消息的对象：</p></li>
        <li id="zhangsan" data-id="zhangsan">zhangsan</li>
        <li id="lisi" data-id="lisi">lisi</li>
        <li id="wangwu" data-id="wangwu">wangwu</li>
    </ul>
    <p>
        <input type="text" placeholder="请输入你要发送的内容，按回车键发送" id="chat"/>
    </p>
    <div id="output-container">
        <ul>

        </ul>
    </div>
</div>
<!--<div>-->
    <!--<div>-->
        <!--<button id="connect" onclick="webSocket.connectSocket()">链接</button>-->
        <!--<button id="disconnect" disabled="disabled" onclick="webSocket.disconnectSocket()">点开</button>-->
    <!--</div>-->
    <!--<div id="conversationDiv">-->
        <!--<label>输入消息内容</label>-->
        <!--<input type="text" id="msg" />-->
        <!--<button id="sendSocketMsg" onclick="webSocket.sendSocketMsg()" disabled="disabled">发送</button>-->
        <!--<p id="response"></p>-->
    <!--</div>-->
<!--</div>-->


<!--<script src="socket.io.slim.js"></script>-->
<!--<script src="sockjs-0.3.4.js"></script>-->
<script src="sockjs.min.js"></script>
<script src="stomp.js"></script>
<script src="jquery.min.js"></script>
<script src="https://cdn.staticfile.org/json2/20160511/json2.min.js"></script>
<script src="mySocket.js"></script>

<script type="text/javascript">
    $("ul li").click(function () {
        $("#moren").html($(this).html());
    });
//    var webSocket = (function () {
//        var ws;
//        function connectSocket() {
//            if (('WebSocket' in window) || ('MozWebSocket' in window)) {
//                ws = new WebSocket("ws://" + (document.location.hostname == "" ? "localhost" : document.location.hostname) + ":" + (document.location.port == "" ? "8080" : document.location.port) + "/ws/endpointWisely?userId=11111");
//            } else {
//                ws = new SockJS("http://" + (document.location.hostname == "" ? "localhost" : document.location.hostname) + ":" + (document.location.port == "" ? "8080" : document.location.port) + "/ws/endpointWisely?userId=11111");
//            }
//            ws.onopen = function () {
//                console.log("打开");
//                setConnected(true);
//            }
//            ws.onclose = function () {
//                console.log("关闭");
//            }
//
//            ws.onmessage = function (msg) {
//                $("#response").html(msg.data);
//            }
//        }
//        function setConnected(connected) {
//            document.getElementById("connect").disabled = connected;
//            document.getElementById("disconnect").disabled = !connected;
//            document.getElementById("sendSocketMsg").disabled = !connected;
////            document.getElementById("conversationDiv").style.visibility = connected ? 'visibile' : 'hidden';
//        }
//        function disconnectSocket() {
//            if (ws != null) {
//                ws.close();
//                ws = null;
//            }
//            setConnected(false);
//        }
//        function sendSocketMsg() {
//            if (ws != null) {
//                var message = $("#msg").val();
//                console.log('发送数据: ' + message);
//                ws.send(message);
//            } else {
//                console.log('连接未建立，请连接.');
//            }
//        }
//
//        /**
//         * 心跳检测
//         * 若30秒内没有接收到任何来自服务器的信息，则向服务器发起一个ping包
//         * @type {{timeout: number, timeoutObj: null, serverTimeoutObj: null, reset: reset, start: start}}
//         */
//        var heartCheck = {
//            timeout: 20000, //计时器设定为20s
//            timeoutObj: null,
//            serverTimeoutObj: null,
//            reset: function() {
//                clearTimeout(this.timeoutObj);
//                clearTimeout(this.serverTimeoutObj);
//                this.start();
//            },
//            start: function() {
//                var self = this;
//                this.timeoutObj = setTimeout(function() {
//                    //向服务器发送ping消息
//                    pingToServer();
//                    //计算答复的超时时间
//                    self.serverTimeoutObj = setTimeout(function() {
//                        //如果调用onclose会执行reconnect，导致重连两次，因此直接调用close()关闭连接
//                        websocket.close();
//                    }, self.timeout);
//                }, this.timeout);
//            }
//        };
//
//        return {
//            connectSocket : connectSocket,
//            sendSocketMsg : sendSocketMsg,
//            disconnectSocket : disconnectSocket
//        }
//    })();
//    /**
//     * 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，
//     * 防止连接还没断开就关闭窗口，server端会抛异常。
//     */
//    window.onbeforeunload = function () {
//        webSocket.disconnectSocket();
//    }
    //
//    var stompClient = null;
//    function setConnected(connected) {
//        document.getElementById("connect").disabled = connected;
//        document.getElementById("disconnect").disabled = !connected;
//        document.getElementById("conversationDiv").style.visibility = connected ? 'visibile' : 'hidden';
//        $('#response').html();
//    }
//    function connect() {
//        var socket = new SockJS('http://localhost:8080/endpointWisely');
//        stompClient = Stomp.over(socket);
//        stompClient.connect({},function (frame) {
//           setConnected(true);
//           console.log("Connected："+frame);
//            stompClient.subscribe('/topic/getResponse',function (response) {
//               showResponse(JSON.parse(response.body).responseMessage);
//            });
//        });
//    }
//    function disconnect() {
//        if(stompClient != null){
//            stompClient.disconnect();
//        }
//        setConnected(false);
//        console.log("Disconnect");
//    }
//    function sendName() {
//        var name = $("#name").val();
//        stompClient.send("/welcome",{},JSON.stringify({'name':name}));
//    }
//    function showResponse(message) {
//        var response = $("#response");
//        response.html(message);
//    }
</script>

</body>
</html>